import React, {Component} from 'react';
import {Text, View, Switch, Button} from 'react-native-ui-lib'; //eslint-disable-line
import {TestCase, TestSuite} from '@rnoh/testerino';
import {Alert} from 'react-native';

class SwitchScreen extends Component {
  state = {
    value1: true,
    value2: false,
    value3: false,
    value4: true,
    value5: false,
    value6: true
  };

  render() {
    return (
      <TestSuite name="Switch">
        <TestCase itShould="设置 value">
          <View padding-20>
            <Text>value: true</Text>
            <Switch
              value={this.state.value4}
              style={{marginBottom: 20}}
            />
            <Text>value: false</Text>
            <Switch
              value={this.state.value5}
              style={{marginBottom: 20}}
            />
          </View>
        </TestCase>
        <TestCase itShould="onValueChange">
          <View padding-20>
            <Switch
              width={80}
              height={38}
              thumbSize={34}
              value={this.state.value6}
              onValueChange={(value6: boolean) => {
                this.setState({value6})
                Alert.alert(`onValueChange: ${value6}`)
              }}
              style={{marginBottom: 20}}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 thumbColor">
          <View padding-20>
            <Text>thumbColor:#00ff00</Text>
            <Switch
              testID="switch"
              value={this.state.value1}
              style={{marginBottom: 20}}
              thumbColor={'#00ff00'}
            />
            <Text>thumbColor:#ff0000</Text>
            <Switch
              testID="switch"
              value={this.state.value1}
              style={{marginBottom: 20}}
              thumbColor={'#ff0000'}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 testID">
          <View padding-20>
            <Switch
              testID="switch1"
              value={true}
            />
            <Button
              onPress={()=>{
                Alert.alert("testID: switch1")
              }}>
              <Text white>testID</Text>
            </Button>
          </View>
        </TestCase>
        <TestCase itShould="设置 id">
          <View padding-20>
            <Switch
              id="switch"
              value={true}
            />
            <Button
              onPress={()=>{
                Alert.alert("id: switch")
              }}>
              <Text white>ID</Text>
            </Button>
          </View>
        </TestCase>
        <TestCase itShould="设置 thumbStyle">
          <View padding-20>
            <Text>thumbStyle: width: 24,height: 24,borderRadius: 6</Text>
            <Switch
              value={false}
              style={{marginBottom: 20}}
              thumbStyle={{
                width: 24,
                height: 24,
                borderRadius: 6,
              }}
              thumbColor={'pink'}
            />
            <Text>thumbStyle: width: 20,height: 20,borderRadius: 4</Text>
            <Switch
              value={false}
              style={{marginBottom: 20}}
              thumbStyle={{
                width: 20,
                height: 20,
                borderRadius: 4,
              }}
              thumbColor={'pink'}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 onColor, offColor">
          <View padding-20>
            <Text>onColor='purple', offColor: 'red'</Text>
            <Switch
              onColor={'purple'}
              offColor={'red'}
              value={this.state.value2}
              onValueChange={(value2: boolean) => this.setState({value2})}
              style={{marginBottom: 20}}
            />
            <Text>onColor={'green'}, offColor: {'yellow'}</Text>
            <Switch
              onColor={'green'}
              offColor={'yellow'}
              value={this.state.value2}
              onValueChange={(value2: boolean) => this.setState({value2})}
              style={{marginBottom: 20}}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置thumbSize">
          <View padding-20>
            <Text>thumbSize:34</Text>
            <Switch
              width={80}
              height={38}
              thumbSize={34}
              style={{marginBottom: 20}}
            />
            <Text>thumbSize:40</Text>
            <Switch
              width={80}
              height={38}
              thumbSize={40}
              style={{marginBottom: 20}}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置width">
          <View padding-20>
            <Text>width:40</Text>
            <Switch
              width={40}
              style={{marginBottom: 20}}
            />
            <Text>width:80</Text>
            <Switch
              width={80}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置height">
          <View padding-20>
            <Text>height:40</Text>
            <Switch
              width={80}
              height={40}
              thumbSize={38}
              style={{marginBottom: 20}}
            />
            <Text>height:60</Text>
            <Switch
              width={80}
              height={60}
              thumbSize={38}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置style">
          <View padding-20>
            <Text>marginLeft:0, marginRight:0, marginTop: 5, width: 80, height:40</Text>
            <View row>
              <Switch
                value={false}
                disabled
                style={{marginLeft:0, marginRight:0, marginTop: 5, width: 80, height:40}}
                thumbSize={36}
              />
              <Switch
                value={true}
                disabled
              />
            </View>
            <Text>marginLeft:10, marginRight: 10, marginTop: 0, width: 80, height:40</Text>
            <View row>
              <Switch
                value={false}
                disabled
                style={{marginRight:10, marginLeft: 10, marginTop: 0, width: 80, height:40}}
                thumbSize={36}
              />
              <Switch
                value={true}
                disabled
              />
            </View>
          </View>
        </TestCase>
        <TestCase itShould="设置disabled">
          <View padding-20>
            <Text>disabled: true</Text>
            <Switch
              disabled
              style={{marginBottom: 20}}
            />
            <Text>disabled: false</Text>
            <Switch
              disabled={false}
              value={this.state.value3}
              onValueChange={(value3: boolean) => {
                this.setState({value3})
              }}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置disabledColor">
          <View padding-20>
            <Text>disabledColor: blue</Text>
            <Switch
              disabled={true}
              disabledColor={'blue'}
              style={{marginBottom: 20}}
            />
            <Text>disabledColor: green</Text>
            <Switch
              disabled={true}
              disabledColor={'green'}
            />
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

export default SwitchScreen;
